<!-- 回修主页面 -->
<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" v-if="headerShow">
        <a-form size="small" :model="pageData">
          <a-row :gutter="16">
            <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
              <a-form-item
                label="开始时间"
                :label-col-flex="pageData.labelColFlex"
                field="craftType"
                :validate-trigger="['change', 'blur']"
              >
                <a-date-picker  popup-container="html" 
                  class="bacClass"
                  v-model="dataForm1.startDate"
                  allow-clear
                  style="width: 270px"
                />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
              <a-form-item label="结束时间" :label-col-flex="pageData.labelColFlex" field="dateEnd">
                <a-date-picker  popup-container="html" 
                  class="bacClass"
                  v-model="dataForm1.endDate"
                  allow-clear
                  style="width: 270px"
                />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
              <a-form-item label="流转卡号" :label-col-flex="pageData.labelColFlex">
                <a-select popup-container="html" 
                  style="width: 270px"
                  class="bacClass"
                  allow-search
                  :filter-option="false"
                  @focus="selectAwait('', 7)"
                  @search="selectAwait($event, 7)"
                  v-model="dataForm1.roamCard"
                >
                  <a-option
                    v-for="item in pageData.nameList7"
                    :key="item.id"
                    :value="item.flowCardCode"
                    >{{ item.flowCardCode }}</a-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
              <a-form-item label="色号" :label-col-flex="pageData.labelColFlex">
                <a-select popup-container="html" 
                  style="width: 270px"
                  class="bacClass"
                  allow-search
                  :filter-option="false"
                  @focus="selectAwait('', 3)"
                  @search="selectAwait($event, 3)"
                  v-model="dataForm1.colourNumber"
                >
                  <a-option
                    v-for="item in pageData.nameList3"
                    :key="item.id"
                    :value="item.colourNumber"
                    >{{ item.colourNumber }}</a-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
              <a-form-item label="客户名称" :label-col-flex="pageData.labelColFlex">
                <a-select popup-container="html" 
                  style="width: 270px"
                  class="bacClass"
                  allow-search
                  :filter-option="false"
                  @focus="selectAwait('', 1)"
                  @search="selectAwait($event, 1)"
                  v-model="dataForm1.customerName"
                >
                  <a-option
                    v-for="item in pageData.nameList1"
                    :key="item.id"
                    :value="item.customName"
                    >{{ item.customName }}</a-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
              <a-form-item label="回修流转卡号" :label-col-flex="pageData.labelColFlex">
                <a-select popup-container="html" 
                  style="width: 270px"
                  class="bacClass"
                  allow-search
                  :filter-option="false"
                  @focus="selectAwait('', 2)"
                  @search="selectAwait($event, 2)"
                  v-model="dataForm1.flowCardCode"
                >
                  <a-option
                    v-for="item in pageData.nameList2"
                    :key="item.id"
                    :value="item.flowCardCode"
                    >{{ item.flowCardCode }}</a-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="changHeadShow(false)"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding-bottom: 10px">
        <Toolbar :items="['查询', '新增']" @select="selectHandler" @add="addHandler" />
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 85%"
        class="ag-theme-alpine"
        :defaultColDef="defaultColDef"
        :rowData="table.dataList"
        :columnDefs="cfsValue"
        :localeText="localeTextData"
        :loading="pageData.pageLoading"
        :suppressRowClickSelection="true"
      />
      <paginationCopys
        :total="total"
        show-total
        show-jumper
        show-page-size
        @change="changePage"
        @page-size-change="changeSize"
        style="justify-content: center; margin-top: 10px"
        :page-size="pagination.pageSize"
        :current="pagination.page"
      />
    </template>

    <a-drawer
      :drawer-style="{ zIndex: 9999 }"
      height="100%"
      unmountOnClose
      :visible="pageData.showAdd"
      :mask-closable="false"
      placement="bottom"
      @cancel="pageData.showAdd = false"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <dup-rework
        :pageData="pageData"
        @search-handler="searchHandler"
        @select-await="selectAwait"
        ref="dupRework"
        :dataForm="dataForm"
      />
      <template #footer>
        <a-button size="mini" @click="pageData.showAdd = false"> 关闭 </a-button>
        <a-button type="primary" size="mini" @click="saveHandler"> 保存 </a-button>
      </template>
    </a-drawer>
  </PageTabelLayout>
</template>
<script lang="ts">
  import { post, get } from '@/api/http'
  import { ref, reactive, unref, onMounted } from 'vue'
  import PageTabelLayout from '../pageTabelLayout.vue'
  
  import { localeText } from '@/api/aggridZw'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { dupReWork } from '@/api/laboratory'
  import { Message } from '@arco-design/web-vue'
  import { orderFn } from '@/api/laboratory/other'
  import emitter from '@/hooks/useEventBus'
  export default {
    name: 'correction',
    components: { PageTabelLayout,  },
    methods: {
      async saveHandler() {
        let data = null,
          res: any = {}
        data = unref(this.$refs.dupRework.dataForm)

        if (!data.id) {
          res = await dupReWork().addDupReWork([{ ...data }])
        } else {
          res = await dupReWork().editDupReWork([{ ...data }])
        }
        if (res.code === 200) {
          this.pageData.showAdd = false
          Message.success('操作成功')
          this.doRefresh()
        } else {
          Message.error(res.message)
        }
      },
    },
    setup() {
      let headerShow = ref<boolean>(true)
      const dataForm = ref({})
      const selectHandler = () => {
        doRefresh()
      }
      onMounted(() => {
        // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
        doRefresh()
        emitter.on('refresh-correction', () => {
          doRefresh()
          // gridOption.value.sizeColumnsToFit();
        })
      })
      let changHeadShow = (boolVal: boolean) => {
        headerShow.value = boolVal
        emitter.emit('window-change')
      }
      //下拉数据
      const options = ref<any>()
      const loading = ref(false)
      const searchHandler = async (value: any, index: number) => {
        if (value) {
          loading.value = true
          await selectAwait(index, value, (data: any) => {
            options.value = data
          })

          loading.value = false
        } else {
          options.value = []
        }
      }
      // const selectAwait = async (selectIndex:number,value:any = '',cb=(data:any) => {return data}) => {
      //     switch(selectIndex){
      //         case 1:
      //             //获取客户名称下拉列表信息数据
      //             await orderFn().getCustomerList({customName:value}).then(res => {
      //                     if(res.code === 200){
      //                         pageData.customerList = res.data;
      //                         cb(res.data);
      //                     }else{
      //                         Message.error({
      //                             content: "查询失败！",
      //                             duration: 5000,
      //                         });
      //                     }
      //             });
      //             break;
      //         case 4:
      //             //获取流转卡号下拉列表信息数据
      //             await orderFn().getCirculDropList({flowCardCode: '',}).then(res => {
      //                 if(res.code === 200){
      //                     pageData.circulDropList = res.data;
      //                     cb(res.data);
      //                 }else{
      //                     Message.error({
      //                         content: "查询失败！",
      //                         duration: 5000,
      //                     });
      //                 }
      //             });
      //             break;
      //         case 8:
      //             //获取计划单号 下拉列表信息数据
      //             await orderFn().getPlanInfoList({planOrderCode: ''}).then(res => {
      //                 if(res.code === 200){
      //                     pageData.planCodeList = res.data;
      //                     cb(res.data);
      //                 }else{
      //                     Message.error({
      //                         content: "查询失败！",
      //                         duration: 5000,
      //                     });
      //                 }
      //             });
      //             break;
      //     }
      // };

      const addHandler = () => {
        pageData.showAdd = true
        dataForm.value = {}
        pageData.sideTitle = '新增回修信息'
      }

      // const dyBoufeiHandler = () => {

      // };
      const pageData = reactive<{
        labelColFlex: any
        colorCode: string
        roamCard: string
        customerName: string
        showAdd: boolean
        pageLoading: boolean
        sideTitle: string
        customerList: any[]
        circulDropList: any[]
        planCodeList: any[]
        nameList1: any[]
        nameList2: any[]
        nameList3: any[]
        nameList7: any[]
      }>({
        labelColFlex: '100px',
        colorCode: '',
        roamCard: '',
        customerName: '',
        showAdd: false,
        pageLoading: false,
        sideTitle: '',
        customerList: [],
        circulDropList: [],
        planCodeList: [],
        nameList1: [],
        nameList2: [],
        nameList3: [],
        nameList7: [],
      })
      const dataForm1: any = reactive({
        startDate: '',
        endDate: '',
        customerName: '',
        colourNumber: '',
        roamCard: '',
        flowCardCode: '',
      })
      const editHandler = (record: any) => {
        pageData.showAdd = true
        pageData.sideTitle = '编辑回修信息'
        for (var key in record) {
          dataForm.value[key] = record[key]
        }
      }
      const doRefresh = async () => {
        pageData.pageLoading = true
        await dupReWork()
          .getPageDupReWorkList({
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,
            ...dataForm1,
          })
          .then(({ code, data }: any) => {
            if (code === 200) {
              table.handleSuccess(data.list)
              gridOption.value.setRowData(data.list)
              total.value = data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      //回修表格
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
        //调整表格自适应大小
        // gridOption.value.sizeColumnsToFit();
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1,
        width: 150,
      }
      let cfsValue: any[] = [
        {
          headerName: '回修单号',
          field: 'returnRepairsCode',
          pinned: 'fixed',
        },
        {
          headerName: '流转卡号',
          field: 'roamCard',
          pinned: 'fixed',
        },
        {
          headerName: '计划单号',
          field: 'planAdd',
          pinned: 'fixed',
        },
        {
          headerName: '客户名称',
          field: 'customerName',
          pinned: 'fixed',
        },
        {
          headerName: '开单日期',
          field: 'billingDete',
          pinned: 'fixed',
        },
        {
          headerName: '回修原因',
          field: 'repairsRemark',
          pinned: 'fixed',
        },
        {
          headerName: '缸型',
          field: 'cylinderType',
          pinned: 'fixed',
        },
        {
          headerName: '品名',
          field: 'productName',
          pinned: 'fixed',
        },
        {
          headerName: '色号',
          field: 'colorCode',
          pinned: 'fixed',
        },
        {
          headerName: '色称',
          field: 'colorName',
          pinned: 'fixed',
        },
        {
          headerName: '备注',
          field: 'remark',
          pinned: 'fixed',
        },
        {
          headerName: '建立人',
          field: 'createName',
          pinned: 'fixed',
        },
        {
          headerName: '建立时间',
          field: 'createTime',
          pinned: 'fixed',
        },
        {
          headerName: '修改人',
          field: 'updateName',
          pinned: 'fixed',
        },
        {
          headerName: '修改时间',
          field: 'updateTime',
          pinned: 'fixed',
        },
        {
          headerName: '操作',
          field: 'action',
          resizable: false,
          filter: false,
          sortable: false,
          lockPosition: 'right',
          width: '100',
          pinned: 'right',
          cellRenderer: {
            template: `<a-tag color="#ff7d00" @click="a" class="gesture">修改</a-tag>`,
            setup(props: any) {
              const a = () => {
                editHandler(props.params.data)
              }
              return {
                a,
              }
            },
          },
          // lockPosition: 'right',
          // width: 150,
        },
      ]
      // let a = [{
      //     showRowGroup: 'hide_def',
      //     "headerName": "",
      //     "checkboxSelection": true,
      //     "headerCheckboxSelection": true,
      //     "pinned": "left",
      //     "width": 50,
      //     resizable: false,
      //     filter: false,
      //     sortable: false,
      //     minWidth: 50,
      //     maxWidth: 50,
      //     lockPosition: "left",
      // }]
      // cfsValue = a.concat(cfsValue);
      const total = ref(10)
      const changePage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const changeSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }
      const pagination = usePagination(doRefresh)
      const localeTextData: any = ref(localeText)
      const table = useTable()
      const rowKey = useRowKey('id')
      const selectAwait = (val: any, num: any) => {
        if (num == 1) {
          post({
            url: 'aps/custom/getDropValue',
            data: { customName: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList1 = data
            }
          })
        } else if (num == 2) {
          post({
            url: 'aps/circulatCard/getDropValue',
            data: { flowCardCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList2 = data
            }
          })
        } else if (num == 3) {
          post({
            url: 'pdm/proofingManage/getFieldValue1',
            data: { colourNumber: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList3 = data
            }
          })
        } else if (num == 7) {
          post({
            url: 'aps/circulatCard/getDropValue',
            data: { flowCardCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList7 = data
            }
          })
        }
      }
      return {
        pagination,
        table,
        rowKey,
        headerShow,
        pageData,
        selectHandler,
        addHandler,
        localeTextData,
        changePage,
        changeSize,
        total,
        cfsValue,
        defaultColDef,
        gridReady,
        editHandler,
        doRefresh,
        searchHandler,
        selectAwait,
        dataForm,
        options,
        loading,
        changHeadShow,
        dataForm1,
      }
    },
  }
</script>
<style scoped>
  .aInput {
    width: 270px;
    background: #fff;
    border: 1px solid #c9cdd3;
  }
</style>
